<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue3 </title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.global.min.js"></script>
	</head>
	<body>
		 <div id="app">
			 {{msg}}
		 </div>
	</body>
	
	<script>
		// 1. 定义一个组件选项对象
		var HelloVueApp ={
          // data 选项是一个函数，它返回一个对象
			data(){
				return {
			         msg:"helloworld",		
				}
			}
		};
		// 2. 创建并挂载 Vue 应用
		Vue.createApp(HelloVueApp).mount("#app");
		
		/***
		这段段代码是使用 Vue 3 创建一个最简单的 Vue 应用的标准方式。它包含两个主要步骤：
		定义一个组件 (HelloVueApp)：这个对象描述了你的应用（或组件）应该如何工作，
		包括它的数据（data）。
		创建并挂载应用 (Vue.createApp(...).mount(...))：
		使用 Vue 提供的 createApp 方法来创建一个应用实例，并将其挂载到 HTML 页面的指定元素上
		
		1. var HelloVueApp = { ... }
		var HelloVueApp: 声明一个变量，用来存储我们的根组件。在现代 JavaScript 中，
		更推荐使用 const 或 let，但 var 也能工作。
		{ ... }: 这是一个组件选项对象。你可以把它想象成一个描述组件 “蓝图” 的 JSON。
		data() { return { ... } }:
		data 是 Vue 组件最重要的选项之一，它用于定义组件的响应式数据。
		data 必须是一个函数，并且必须返回一个对象。
		这是为了确保每个组件实例都能拥有独立的数据副本，避免组件复用时代码污染。
		msg: "helloworld"：在返回的对象中，我们定义了一个名为 msg 的属性，
		并给它赋值 "helloworld"。因为它在 data 中定义，所以 msg 是响应式的。
		这意味着，如果我们以后修改 HelloVueApp.msg 的值，
		页面上所有使用 msg 的地方都会自动更新。
		2. Vue.createApp(HelloVueApp).mount("#app")
		这是一个链式调用，可以分解为两步：
		Vue.createApp(HelloVueApp):
		Vue.createApp() 是 Vue 3 的全局 API，用于创建一个新的 Vue 应用实例。
		我们将之前定义的 HelloVueApp 组件作为参数传入。这个组件就成为了我们整个应用的根组件。
		这个方法会返回一个应用实例。
		.mount("#app"):
		这是在应用实例上调用的 mount 方法。
		它的作用是将创建好的 Vue 应用挂载（或说 “渲染”）到 HTML 页面中 id 为 app 的 DOM 元素上。
		你必须在 HTML 中有一个对应的元素，例如 <div id="app"></div>。
		
		***/
	</script>
</html>
